<template>
    <div class="course-list">
      <el-card>
        <div slot="header" class="clearfix">
          <span>课程列表</span>
        </div>
        <el-table :data="courses" style="width: 100%">
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column prop="title" label="课程名称" />
          <el-table-column prop="description" label="简介" />
          <el-table-column prop="instructor.username" label="讲师" />
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button type="text" @click="viewDetail(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </template>
  
  <script>
  import request from '@/utils/request'
  
  export default {
    name: 'CourseList',
    data() {
      return {
        courses: []
      }
    },
    created() {
      this.fetchCourses()
    },
    methods: {
      fetchCourses() {
        request.get('/api/courses')
          .then(data => {
            this.courses = data
          })
      },
      viewDetail(course) {
        this.$router.push({ name: 'CourseDetail', params: { id: course.id } })
      }
    }
  }
  </script>
  
  <style scoped>
  .course-list {
    max-width: 900px;
    margin: 40px auto;
  }
  </style>